<template>
  <div ref="html">
    <div class="mx-auto container my-5">
      <!-- 搜索 -->
      <div class="w-full flex justify-center mt-10">
        <div class="w-full md:w-8/12 lg:w-6/12">
          <div class="relative">
            <input v-model="search" @input="searchChange" type="text"
                   class="w-full h-12 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-blue-500"
                   placeholder="搜索你想要的内容" style="font-family: 'Roboto', sans-serif;"/>
            <div class="absolute right-0 top-0 h-full flex items-center">
              <div
                  class="w-12 h-12 flex justify-center items-center rounded-full bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
                <span class="iconfont icon-search text-white"></span>
              </div>
            </div>
            <!-- <div v-if="searchList.length > 0" class="absolute w-full bg-white rounded-md mt-2">
                <ul>
                    <li v-for="(item, index) in searchList" :key="index"
                        class="border-b border-gray-300 p-2">
                        <nuxt-link :to="'/post/' + item.postId" v-text="item.title"></nuxt-link>
                    </li>
                </ul>
            </div> -->
          </div>
        </div>
      </div>
      <div class="flex flex-wrap relative">
        <div class="bg-white p-6 rounded-md mt-4 w-full lg:w-8/12" ref="leftNormalContainer">
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <p class="font-semibold text-2xl">最新文章</p>
            </div>
            <div>
              <div @click="showCategory()" class="relative bg-gray-100 px-3 cursor-pointer rounded-md">
                                <span class="custom-font-14 leading-8 relative inline select-none">分类
                                    <span class="iconfont icon-arrow-down inline-block"
                                          :class="isShowCategory ? 'reverse' : ''"/>
                                </span>
              </div>
            </div>
          </div>

          <div v-show="isShowCategory" :class="isShowCategory ? '' : 'hidden'"
               class="flex py-3 space-x-4 flex-none overflow-auto">
            <div class="btn-2" @click="selectTagId('')"
                 :class="tagId == '' ? 'bg-blue-600 text-white' : ''">全部
            </div>
            <div v-for="(item, index) in categoryList" :key="index" @click="selectTagId(item.tagId)"
                 class="btn-2" :class="tagId == item.tagId ? 'bg-blue-600 text-white' : ''">
              {{ item.name }}
            </div>
          </div>
          <ul>
            <li v-for="(item, index) in articleList" :key="index" class="mt-4">
              <div class="border-b pb-2">
                <div class="flex relative">
                  <div class="flex-1 mr-2">
                    <nuxt-link target="_blank" :to="'/post/' + item.postId">
                      <p class=" font-semibold text-base h-8 leading-8 w-full overflow-y-hidden"
                         v-text="item.title">
                      </p>
                    </nuxt-link>
                    <nuxt-link target="_blank" :to="'/post/' + item.postId">
                      <p class=" custom-font-14 leading-8 overflow-hidden h-6"
                         v-text="item.summary"></p>
                    </nuxt-link>
                    <ul class="flex items-center mt-6  text-gray-400">
                      <li class="flex items-center leading-4">
                        <span class="custom-font-12" v-text="howtime(item.editTime)"></span>
                      </li>
                      <li class="flex items-center leading-4">
                        <span class="flex items-center iconfont icon-browse"/>
                        <span class="custom-font-12 ml-1" v-text="item.visits"></span>
                      </li>
                      <li class="flex items-center leading-4 ml-1">
                        <span class="flex items-center iconfont icon-good"/><span
                          class="custom-font-12 ml-1">{{ item.likes }}</span>
                      </li>
                      <li class="flex items-center leading-4 ml-1">
                        <span class="flex items-center iconfont icon-comments"/><span
                          class="custom-font-12 ml-1">{{ 1887 }}</span>
                      </li>
                    </ul>
                  </div>
                  <!-- <div v-if="item.image == ''" class="flex-none w-32 h-24"></div> -->
                  <img v-if="item.image != ''" class="w-32 h-24 right-0 object-contain"
                       :src="'https://ssm.res.meizu.com/admin/2023/05/12/1780834568/tZjWcG1qvw.png?x-oss-process=image/resize,w_216/format,webp'"
                       alt="" srcset=""/>
                </div>
              </div>
              <ins v-if="index == 5" class="adsbygoogle" style="display:block" data-ad-format="fluid"
                   data-ad-layout-key="-h8-2h-1d-6s+z6" data-ad-client="ca-pub-6667301035180632"
                   data-ad-slot="6020177581"></ins>
            </li>
            <li v-show="empty" class="mt-4 text-center">
              <p>到底了</p>
            </li>
            <div v-show="loading" class="w-full animate-pulse">
              <div class="flex items-center mb-6">
                <div class="w-8/12">
                  <div class="w-10/12 h-6 bg-gray-200 my-3">
                  </div>
                  <div class="w-10/12 h-6 bg-gray-200 my-3">
                  </div>
                </div>
                <div class="flex-1 bg-gray-200 w-2/12 md:w-1/12 h-16">
                </div>
              </div>
              <div class="flex items-center mb-6">
                <div class="w-8/12">
                  <div class="w-10/12 h-6 bg-gray-200 my-3">
                  </div>
                  <div class="w-10/12 h-6 bg-gray-200 my-3">
                  </div>
                </div>
                <div class="flex-1 bg-gray-200 w-2/12 md:w-1/12 h-16">
                </div>
              </div>
            </div>
          </ul>
        </div>

        <!-- 广而告之 -->
        <div class="mt-4 hidden lg:block w-full lg:w-4/12 absolute right-0">
          <div class="lg:pl-6 w-full" ref="rightNormalContainer">
            <div class="w-full py-6 rounded text-center bg-gradient-to-r from-cyan-500 to-blue-500">
              <nuxt-link to="/">
                <div class="mx-auto">
                  <p class="text-2xl font-bold text-white">优质广告位</p>
                </div>
              </nuxt-link>
            </div>
            <div class="w-full my-2 py-6 rounded text-center bg-gradient-to-r from-violet-500 to-fuchsia-500">
              <nuxt-link to="/tool/detail/FlvPlayer">
                <div class="mx-auto">
                  <p class="text-2xl font-bold text-white">FLV播放器</p>
                </div>
              </nuxt-link>
            </div>
            <div class="w-full my-2 py-6 rounded text-center bg-gradient-to-r from-orange-500 to-fuchsia-700">
              <nuxt-link to="/tool/detail/ScreenRec">
                <div class="mx-auto">
                  <p class="text-2xl font-bold text-white">PC在线录屏</p>
                </div>
              </nuxt-link>
            </div>
          </div>
          <div class="pl-6 w-full" ref="rightNormalContainer">
            <nuxt-link to="/tool/detail/ScreenRec"><img src="/ad/ScreenRecAD.jpg" alt="" srcset="">
            </nuxt-link>
          </div>
          <div v-bind:style="{
                        width: rightFixedContainerWidth,
                    }" class="h-20 pl-6 my-4 hidden lg:block w-full" ref="rightFixedContainer">
            <div class="bg-white rounded-md p-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <p class="font-semibold text-2xl">AD</p>
                  <p class=" hidden lg:inline leading-8 mx-4 text-sm text-gray-400 ">
                    广而告之
                  </p>
                </div>
                <div>
                  <div class="btn-1">更多</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue';
import {api} from "~/api/api";
import howtime from "~~/plugins/time";

let isShowCategory = ref(true);
let rightFixedContainerWidth = ref("100%");
let loading = ref(false);
let empty = ref(false);
let page = ref(2);
let size = ref(10);
let tagId = ref("");
let search = ref(''); // 添加这一行
const articleParams = ref({
  tagId: ''
});
let articleList = ref<any[]>([]);
let categoryList = ref<any[]>([]);
let rightNormalContainer = ref<HTMLInputElement>();
let rightFixedContainer = ref<HTMLInputElement>();

let categoryResult = await api.article.getTags();
categoryList.value = categoryResult.data;

const {
  data: articleData,
  pending,
  refresh,
  error
} = await useAsyncData("read_GetList", () => api.article.getList(1, 10, articleParams.value));

if (articleData.value!.success) {
  articleList.value = articleList.value.concat(articleData.value!.data.list);
}

onMounted(async () => {
  await refresh();
  articleList.value = articleData.value!.data.list;
  window.addEventListener("scroll", handleScroll, false);

  //@ts-ignore
  (adsbygoogle = window.adsbygoogle || []).push({});
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

async function selectTagId(id: string) {
  page.value = 2;
  empty.value = false;
  articleList.value = [];
  loading.value = true;
  tagId.value = id;
  if (id == "") {
    articleParams.value.tagId = "";
  } else {
    articleParams.value.tagId = tagId.value;
  }
  await refresh();
  articleList.value = articleData.value!.data.list;
  loading.value = false;
}

function setFloatContainer() {
  if (rightNormalContainer.value!.getBoundingClientRect().bottom <= 0) {
    rightFixedContainer.value!.style.position = "fixed";
    rightFixedContainer.value!.style.top = "0.5rem";
    rightFixedContainerWidth.value = rightNormalContainer.value!.offsetWidth + "px";
  } else if (rightNormalContainer.value!.getBoundingClientRect().bottom > 0) {
    rightFixedContainerWidth.value = "100%";
    rightFixedContainer.value!.style.top = "";
    rightFixedContainer.value!.style.position = "absolute";
  }
}

function handleScroll() {
  let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
  if (scrollTop > 20) {
    setFloatContainer();
  }
  let documentHeight = Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
  );
  if (documentHeight - scrollTop - window.innerHeight < 60 && !empty.value) {
    loadMore();
  }
}

function showCategory() {
  isShowCategory.value = !isShowCategory.value;
}

async function loadMore() {
  if (loading.value) {
    return;
  }
  loading.value = true;
  const result = (await api.article.getList(page.value, 10, ""));
  if (result.success) {
    if (result.data.content.length == 0) {
      empty.value = true;
    }
    articleList.value = articleList.value.concat(result.data.content);
    page.value = page.value + 1;
  }
  loading.value = false;
}

useHead({
  title: "文章",
  titleTemplate: (title) => `${title} - ZNGG在线工具`,
  meta: [
    {name: 'Keywords', content: 'ZNGG在线工具文章,IT文章分享,高质量内容输出,高质量文章分享'},
    {
      name: 'description',
      content: 'ZNGG在线工具是一个持续提供高质量内容输出平台，并将输出内容转变为成果，提供各种各样的在线工具。'
    }
  ],
  script: [
    {
      async: "true",
      src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6667301035180632',
      crossorigin: "anonymous"
    }
  ]
});
</script>
<style>
.RightFixedContainer-absolute {
  @apply absolute;
}

.RightFixedContainer-fixed {
  @apply fixed top-2;
}

.border-t-1 {
  border-top-width: 1px;
}

.icon-arrow-down {
  @apply duration-100;
}

.reverse {
  transform: rotate(180deg);
}
</style>
